<template>
    <div>
        <div class="crumbs">
            <Breadcrumb>
                <BreadcrumbItem to="/special"><Icon type="ios-cart"/> 专题列表</BreadcrumbItem>
                <BreadcrumbItem>专题编辑</BreadcrumbItem>
            </Breadcrumb>
        </div>
        <Card>
            <!-- 横排表单 -->
            <Form ref="form" :model="form" :label-width="140" :rules="rules">
                <Col :span="8">
                    <FormItem label="专题名称" prop="title">
                        <Input v-model="form.title"></Input>
                    </FormItem>
                </Col>
                <Col :span="8">
                    <FormItem label="分类" prop="cate_id">
                        <Select v-model="form.cate_id" clearable filter placeholder="请选择" style="width:50%">
                            <Option :key="id" v-for="(title, id) in cate" :value="id.replace('_', '')">{{title}}</Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col :span="16">
                    <FormItem label="主标题" prop="main_title">
                        <Input v-model="form.main_title"></Input>
                    </FormItem>
                </Col>
                <Col :span="16">
                    <FormItem label="副标题" prop="sub_title">
                        <Input type="textarea" :autosize="{minRows: 2,maxRows: 10}" v-model="form.sub_title" />
                    </FormItem>
                </Col>
                <Col :span="24">
                    <FormItem label="顶部背景图" prop="top_cover">
                        <Upload
                            :action="uploadApi"
                            :headers="headers"
                            accept="image/*"
                            :show-upload-list="false"
                            :on-success="(res, file) => {
                                onSuccess(res, file, 'top_cover');
                            }"
                            >
                            <Button type="info" icon="ios-cloud-upload-outline">上传</Button> {{form.top_cover ? form.top_cover.name : '未上传'}}
                        </Upload>
                    </FormItem>
                </Col>
                <Col :span="24">
                    <FormItem label="底部背景图" prop="bottom_cover">
                        <Upload
                            :action="uploadApi"
                            :headers="headers"
                            accept="image/*"
                            :show-upload-list="false"
                            :on-success="(res, file) => {
                                onSuccess(res, file, 'bottom_cover');
                            }"
                            >
                            <Button type="info" icon="ios-cloud-upload-outline">上传</Button> {{form.bottom_cover ? form.bottom_cover.name : '未上传'}}
                        </Upload>
                    </FormItem>
                </Col>
                <Col :span="24">
                    <FormItem>
                        <span slot="label">
                            <Button icon="md-add" shape="circle" type="primary" @click="add('detail')"></Button> 复杂明细
                        </span>
                        <CustomDetail :detail="form.detail" :subTitle="true"></CustomDetail>
                    </FormItem>
                </Col>
                <Col :span="24">
                    <FormItem>
                        <span slot="label">
                            <Button icon="md-add" shape="circle" type="primary" @click="add('section')"></Button> 描述段落
                        </span>
                        <CustomDetail :detail="form.section" :subTitle="false"></CustomDetail>
                    </FormItem>
                </Col>
                <Col :span="24">
                    <FormItem>
                        <span slot="label">
                            <Button icon="md-add" shape="circle" type="primary" @click="add('field')"></Button> 自定义字段
                        </span>
                        <CustomField :detail="form.field" :subTitle="false"></CustomField>
                    </FormItem>
                </Col>
                <Col :span="24">
                    <FormItem>
                        <span slot="label">
                            <Button icon="md-add" shape="circle" type="primary" @click="add('fields')"></Button> 自定义字段(分段)
                        </span>
                        <CustomFields :detail="form.fields" :subTitle="false"></CustomFields>
                    </FormItem>
                </Col>
                
                <div style="clear:both;"></div>
                <div id="btnDiv">
                    <FormItem>
                        <Button icon="md-checkmark" type="primary" @click="submitForm">提交</Button>
                        <Button icon="md-close" @click="back">取消</Button>
                    </FormItem>
                </div>
            </Form>
        </Card>
    </div>
</template>

<script>
    var module = 'special';
    export default {
        components: {
            CustomDetail: require('../common/custom_detail'),    //自定义描述组件(在本页使用了两次)
            CustomField: require('../common/custom_field'),    //自定义字段
            CustomFields: require('../common/custom_fields'),    //自定义字段分段落
        },
        data: function(){
            return {
                url: pub.apiDomain + module,
                form: {
                    detail: [],
                    section: [],
                },
                cate:{},    //分类
                //验证规则:需要在form组件加rule="rules",在input等组件上加prop="字段名"
                rules: {
                    title: [{ required: true, message: '专题名称不能为空', trigger: 'blur' }],
                    cate_id: [{ required: true, message: '请选择分类', trigger: 'blur' }],
                },
                uploadApi: pub.apiDomain + 'index/upload',
                headers: {'Authorization': pub.token()},
            }
        },
        created(){
            this.getData();
        },
        mounted(){
            
        },
        methods: {
            //加载数据
            getData() {
                let id = this.$route.params.id;
                //加载分类列表
                this.$axios.get(pub.apiDomain + '/cate/map/module/'+module).then((res) => {
                    this.cate = res.data;
                })
                if(id > 0) {
                    //加载表单数据
                    this.$axios.post(this.url + '/get/id/'+id, this.form).then((res) => {
                        this.form = res.data;
                    })
                }
            },
            back(){
                this.$router.push('/'+module);
            },
            //添加明细
            add(type){
                var row = {url:'',name:''};
                if(type == 'fields') row.data = [];
                this.form[type].push(row);
            },
            submitForm() {
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        this.$axios.post(this.url + '/save', this.form).then((res) => {
                            this.$Message.success('保存成功！');
                            this.$router.push('/'+module);
                        })
                    } else {
                        return false;
                    }
                });
            },
            //文件上传
            onSuccess(res, file, field) {
                this.form[field] = {name: file.name, url: res.m};
            },
        }
    }
</script>
<<style scoped>
#btnDiv{
    position: fixed;
    top: 144px;
    right: 60px;
}
</style>
